<!-- components/BlogCardSkeleton.vue -->
<template>
  <div
    class="animate-pulse bg-white dark:bg-neutral-800 p-4 rounded-2xl shadow-md border border-gray-200 dark:border-gray-700"
  >
    <div class="h-40 bg-gray-200 dark:bg-gray-700 rounded-lg mb-4"></div>
    <div class="h-6 bg-gray-200 dark:bg-gray-700 rounded w-3/4 mb-2"></div>
    <div class="h-4 bg-gray-200 dark:bg-gray-700 rounded w-full mb-2"></div>
    <div class="h-4 bg-gray-200 dark:bg-gray-700 rounded w-5/6 mb-4"></div>
    <div class="flex gap-2">
      <div class="h-5 w-16 bg-gray-200 dark:bg-gray-700 rounded"></div>
      <div class="h-5 w-12 bg-gray-200 dark:bg-gray-700 rounded"></div>
    </div>
  </div>
</template>
